<template>
  <div>
    <el-container>
      <el-header>
        <el-row
          ><el-col :span="2"> 销售机会分配 </el-col
          ><el-col :span="6" :offset="13">
            销售主管查看销售机会，并将销售机会分配给合适的销售人员
          </el-col></el-row
        >
      </el-header>
      <el-main>
        <el-button
          icon="el-icon-refresh-right"
          circle
          @click="cxsx()"
        ></el-button>
        <el-button
          icon="el-icon-search"
          circle
          @click="dialogVisibleselect = true"
        ></el-button>
        <el-table :data="tableData" style="width: 100%" border stripe>
          <el-table-column
            prop="ChanName"
            label="客户名称"
            width="180"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="ChanTitle"
            label="概要"
            width="180"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="ChanLinkMan"
            label="联系人"
            width="180"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="ChanLinkTel"
            label="联系电话"
            width="180"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="UserLName"
            label="创建人"
            width="180"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="ChanCreateDate"
            label="创建时间"
            width="180"
            align="center"
          >
            <template slot-scope="scope">
              <span>{{ operatingTime(scope.row.ChanCreateDate) }}</span>
            </template>
          </el-table-column>

          <el-table-column label="分配人" width="149" align="center">
            <template slot-scope="scope">
              <div slot="reference" class="name-wrapper">
                <el-tag
                  size="medium"
                  @click="fp(scope.row)"
                  :type="scope.row.s ? 'success' : 'warning'"
                  >{{
                    scope.row.s ? scope.row.s : "还没分配"
                  }}</el-tag
                >
              </div>
            </template>
          </el-table-column>
        </el-table>
        <!--分页-->
        <el-row>
          <el-col :span="1">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[3, 6, 9, 12]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="rows"
            >
            </el-pagination>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
    <!--修改-->
    <el-dialog
      title="销售机会分配修改"
      :visible.sync="dialogVisibleupdate"
      width="50%"
    >
      <el-table
        :data="tableData1"
        style="width: 361px; margin-left: 185px"
        border
        stripe
      >
        <el-table-column
          prop="UserLName"
          label="在职员工"
          width="180"
          align="center"
        >
        </el-table-column>
        <el-table-column label="点击分配" align="center">
          <template slot-scope="scope">
            <el-button size="mini" @click="xgz(scope.row)"
              ><i class="el-icon-circle-check"></i
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <!--查询-->
    <el-dialog
      title="销售机会分配查询"
      :visible.sync="dialogVisibleselect"
      width="50%"
    >
      <el-form ref="formselect" :model="formselect" label-width="80px">
        <el-form-item label="客户名称" prop="ChanName">
          <el-input v-model="formselect.ChanName"></el-input>
        </el-form-item>
        <el-form-item label="联系人" prop="ChanLinkMan">
          <el-input v-model="formselect.ChanLinkMan"></el-input>
        </el-form-item>
        <el-form-item label="创建人" prop="UserName">
          <el-input v-model="formselect.UserName"></el-input>
        </el-form-item>
        <el-form-item label="分配人" prop="UserLName">
          <el-input v-model="formselect.UserLName"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleinsert = false">取 消</el-button>
        <el-button type="primary" @click="mhcx('formselect')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { feye, getao, upxg, mhc, zt } from "../http/user.js";
export default {
  data() {
    return {
      //每页显示数
      pageSize: 3,
      //当前页
      currentPage: 1,
      //总行数
      rows: 1,
      bol: false,
      //销售计划表id
      id: "",
      tableData: [],
      tableData1: [],
      dialogVisibleselect: false,
      formselect: {
        ChanName: "",
        ChanLinkMan: "",
        UserName: "",
        UserLName: "",
      },
      dialogVisibleupdate: false,
      formupdate: {
        UserName: "",
      },
    };
  },
  methods: {
    operatingTime(timeDate) {
      return this.$moment(timeDate).format("YYYY-MM-DD");
    },
    sx() {
      feye({
        params: {
          i: this.currentPage,
          j: this.pageSize,
        },
      })
        .then((res) => {
          console.info(res);
          this.tableData = res.Data;
          this.rows = res.Row;
        })
        .catch((err) => {
          console.info(err);
        });
    },
    handleSizeChange: function (val) {
      if (this.bol == false) {
        this.pageSize = val;
        this.sx();
      } else if (this.bol == true) {
        this.pageSize = val;
        this.mhcx();
      }
    },
    handleCurrentChange: function (val) {
      if (this.bol == false) {
        this.currentPage = val;
        this.sx();
      } else if (this.bol == true) {
        this.currentPage = val;
        this.mhcx();
      }
    },
    fp(row) {
      this.dialogVisibleupdate = true;
      this.id = row.ChanID;
      getao()
        .then((res) => {
          this.tableData1 = res.Data;
        })
        .catch((err) => {
          console.info(err);
        });
    },
    xgz(row) {
      upxg({
        params: {
          id: this.id,
          fpid: row.UserID,
        },
      })
        .then((res) => {
          if (res.Data == 1) {
            zt({
              params: {
                id: this.id,
              },
            })
              .then((res) => {
                console.log(res);
                this.$message({
                  message: "恭喜你，分配成功",
                  type: "success",
                });
              })
              .catch((err) => {
                console.info(err);
              });
            this.sx();
            this.dialogVisibleupdate = false;
          } else {
            this.dialogVisibleupdate = false;
          }
        })
        .catch((err) => {
          console.info(err);
        });
    },
    mhcx() {
      this.bol = true;
      mhc({
        params: {
          i: this.currentPage,
          j: this.pageSize,
          khname: this.formselect.ChanName,
          pho: this.formselect.ChanLinkMan,
          cjname: this.formselect.UserName,
          fpname: this.formselect.UserLName,
        },
      })
        .then((res) => {
          console.log(res);
          if (res.Data != null) {
            this.$message({
              message: "查询成功",
              type: "success",
            });
            this.dialogVisibleselect = false;
            this.tableData = res.Data;
            this.rows = res.Row;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    cxsx() {
      this.sx();
      this.bol = false;
    },
  },
  mounted() {
    this.sx();
  },
};
</script>

<style scoped>
.el-header {
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
  border-radius: 15px;
}
.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  border: solid 5px white;
  padding: 20px;
  margin-top: 20px;
  border-radius: 20px;
}
.el-col-2 {
  width: 8.33333%;
  font-size: 17px;
  font-weight: 900;
}
.el-col-6 {
  width: 37.5%;
  font-size: 1px;
  font-weight: 300;
  color: rgb(83, 83, 83);
}
element.style {
  height: 100%;
  width: 1239px;
}
.el-button.is-circle {
  border-radius: 50%;
  padding: 12px;
  position: relative;
  top: -10px;
  right: -570px;
}
</style>